<template>
  <view class="replug-container">
    <!-- 自定义导航栏 -->
    <custom-navbar title="请重新插枪" backgroundColor="#42a5f5" titleColor="#ffffff"></custom-navbar>
    
    <view class="content" style="margin-top: 80px;">
      <view class="warning-icon">
        <view class="exclamation">!</view>
      </view>
      
      <view class="tip-box">
        <text class="tip-text">充电枪未正确连接</text>
        <text class="tip-subtext">请重新插入后点击下方按钮重新检测</text>
      </view>
      
      <view class="btn" @tap="rescan" :class="{ 'disabled': isChecking }">
        <text>{{ isChecking ? '检测中...' : '重新检测' }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import startChargingApi from '@/src/api/startCharging'
import CustomNavbar from '@/components/CustomNavbar.vue'

export default {
  components: {
    CustomNavbar
  },
  data() {
    return {
      pileId: '',
      isChecking: false
    }
  },
  onLoad(options) {
    // 获取充电桩ID
    this.pileId = options.pileId || this.$store.state.charger.pileId;
    console.log('充电桩ID:', this.pileId);
  },
  methods: {
    // 重新检测充电枪连接状态
    rescan() {
      if (this.isChecking) return; // 防止重复点击
      
      // 显示加载中
      this.isChecking = true;
      uni.showLoading({
        title: '正在检测充电枪...',
        mask: true
      });
      
      // 调用API检测充电枪状态
      startChargingApi.getChargingProgress(this.pileId).then(res => {
        uni.hideLoading();
        this.isChecking = false;
        
        console.log('充电枪状态检测结果:', res);
        
        // 判断插枪状态
        if (res && res.data.insertState === 0) {
          // 充电枪已连接
          uni.showToast({
            title: '充电枪已连接',
            icon: 'success',
            duration: 1500
          });
          
          // 跳转到开始充电页面
          setTimeout(() => {
            uni.redirectTo({
              url: '/pages/start_charging/startCharging?pileId=' + this.pileId
            });
          }, 1500);
        } else {
          // 充电枪未连接
          uni.showToast({
            title: '未检测到充电枪连接',
            icon: 'none',
            duration: 2000
          });
        }
      }).catch(err => {
        uni.hideLoading();
        this.isChecking = false;
        console.error('检测充电枪状态失败:', err);
        
        uni.showToast({
          title: '检测失败，请重试',
          icon: 'none',
          duration: 2000
        });
      });
    }
  }
}
</script>

<style lang="scss">
.replug-container {
  min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 120px; /* Add padding to prevent TabBar overlap */
  
  .content {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    animation: fadeIn 0.6s ease-out;
    
    .warning-icon {
      background: #fff;
      border-radius: 50%;
      width: 100px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 30px;
      box-shadow: 0 6px 16px rgba(255, 107, 0, 0.2);
      position: relative;
      animation: pulseWarning 2s infinite;
      
      &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 3px solid #ff6b00;
        opacity: 0;
        animation: pulseRing 2s infinite;
      }
      
      .exclamation {
        font-size: 60px;
        color: #ff6b00;
        font-weight: bold;
      }
    }
    
    .tip-box {
      background: #fff;
      border-radius: 16px;
      width: 90%;
      padding: 40px 24px;
      margin-bottom: 50px;
      font-size: 18px;
      color: #333;
      text-align: center;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
      
      .tip-text {
        font-size: 22px;
        font-weight: bold;
        color: #333;
      }
      
      .tip-subtext {
        display: block;
        margin-top: 16px;
        font-size: 16px;
        color: #666;
        line-height: 1.5;
      }
    }
    
    .btn {
      height: 50px;
      line-height: 50px;
      width: 80%;
      text-align: center;
      background-color: #ff6b00;
      color: #fff;
      font-size: 18px;
      font-weight: 500;
      border-radius: 50px;
      box-shadow: 0 6px 16px rgba(255, 107, 0, 0.3);
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.97);
        background-color: #e86000;
      }
      
      &.disabled {
        background-color: #ccc;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        pointer-events: none;
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseWarning {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes pulseRing {
  0% {
    transform: scale(0.8);
    opacity: 0.3;
  }
  80%, 100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
</style> 